<div (init)="onInit()" class="chronicon-tooltip" [style.display]="item == null ? 'none': 'block'" [style.left]="left" [style.top]="top" [style.border-color]="RAIRTY_TO_COLOR[item?.rarity]">
    <div *ngIf="item != null" class="item-tooltip-body">
        <div class="item-tooltip-header">
            <div class="item-tooltip-icon" [style.background]="iconBackground"></div>
            <div class="item-tooltip-name-desc">
                <div class="item-tooltip-name" [style.color]="RAIRTY_TO_COLOR[item.rarity]">{{item.name}}</div>
                <div class="item-tooltip-type">{{itemType}}</div>
            </div>
        </div>
        <div class="item-tooltip-level">Level: {{item.level}}</div>
        <div *ngIf="item.requiresClass != null" class="item-tooltip-class">{{item.requiresClass.name}} Item</div>
        <div *ngIf="item.partOfSet != null" class="item-tooltip-set">Set: {{item.partOfSet.name}}</div>
        <div *ngIf="item.partOfSet != null" class="item-tooltip-type">{{itemSetTypeText}}</div>
        <div *ngFor="let bonus of itemSetBonuses">
            <span class="item-tooltip-type">{{bonus.key}}) </span>
            <span [style.color]="itemSetBonusColor(bonus.key)">{{bonus.value}}</span>
        </div>
        <enchant-text *ngFor="let enchant of item.fixedEnchantData" class="item-tooltip-fixed-enchant" [enchant]="enchant" [item]="item"></enchant-text>
        <div *ngFor="let types of item.floatingEnchantData" class="item-tooltip-floating-enchant"><div class="bullet-icon"></div> (random {{floatingEnchantDesc(types)}} enchantment)</div>
        <div *ngFor="let socket of item.gems" class="item-tooltip-socket">
            <gem-socket [socket]="socket"></gem-socket>
            <div *ngIf="socket.gem == null">Empty {{shapeName(socket.shape)}} Socket</div>
            <enchant-text *ngIf="socket.gem != null" [enchant]="socket.enchant" [item]="item" [bulleted]="false"></enchant-text>
        </div>
    </div>
</div>
